/* CSS Document */



#navigation , #navigation li ul{
    padding:0; 
    margin:0;
    list-style-type: none;
}
#navigation li {
    float:left;
    text-align:center;
    position:relative;
}
#navigation li a:link, #navigation li a:visited {
    display:block; 
    text-decoration:none; 
    color:#000; 
    width:69px; 
    height:20px; 
    line-height:20px; 
    border:0px solid #fff; 
    border-width:0px 0px 0 0; 
    padding-left:10px; 
}
#navigation li ul {
    display: none;
}
 
/* 以下只支持非IE6浏览器 */
#navigation li.hover a {
    color:#fff;
    
}
#navigation li.hover ul {
    display:block; 
    position:absolute; 
    top:16px;
    margin-top:1px;
    left:0; 
    width:90px;
}
#navigation li.hover ul li a {
    display:block; 
    background:#4479af; 
    color:#ffffff; 
    height:10px; 
    line-height:10px; 
    padding:5px 10px; 
    width:70px;
}
#navigation li.hover ul li a:hover {
    color:#fff;
    background:#2f82d7; 
}
把 CSS 引入页面后，下拉菜单就做好了，效果是这样的（鼠标停在“栏目1”上的效果）：

